<template>
  <div class="container">
    <!-- <div class="relative"> -->
        <el-tooltip effect="dark" :content="name" placement="top-start">
        <div class="name">
          <div class="show-name">{{name}}</div>
          <div class="tip">
            <span class="el-icon-loading"></span>
            {{tip}}
          </div>
          <div style="clear:both;"></div>
        </div>
        </el-tooltip>
        <div class="progress">
          <div class="progress-border">
            <el-progress :text-inside="true" :stroke-width="16" :percentage="progress" status="success"></el-progress>
          </div>
          <div class="progress-btn">
            <el-button size="mini" type="text" class="el-icon-refresh" v-show="progress == 100" @click="reDoc2Png">
              <span>重新分解</span>
            </el-button>
          </div>
        </div>
    <!-- </div> -->
    <!-- <div class="name">
      {{name}}
    </div> -->
  </div>
</template>
<script>
export default {
  name: 'UploadProgress',
  props: ['idx', 'name', 'progress', 'status', 'tip'],
  data() {
    return {
      show: true
    }
  },
  methods: {
    reDoc2Png() {
      this.$emit('redoc2png');
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .container {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px 3px 10px;
    border: 1px solid #CCE2FD;
    border-radius: 5px;
    background-color: #EBF2FC;
    position:relative;
    .name {
      padding-left: 6px;
      background-color: #FFFFFF;
      border: 1px solid #cce2fd;
      border-radius: 100px;
      line-height: 28px;
      height: 28px;
      .show-name {
        width: 210px; 
        float: left;
        // display:inline-block;
        white-space: nowrap;
 text-overflow:ellipsis; 
 overflow:hidden;
      }
      .tip {
        width:110px;
        float: left;
        text-align:right; 
        color:#63AEFE;
        box-sizing: border-box;
        padding-right: 6px;
      }
    }
    .progress {
      padding: 0px;
      line-height: 30px;
      .progress-border {
        border: 1px solid #cce2fd;
        border-radius: 100px;
        padding: 0px 0px 1px 1px;
        width: 260px;
        display: inline-block;
      }
      .progress-btn {
        display: inline-block;
      }
    }
  }
  
</style>
